<template>
	<view class="card-conent">
		<view style="height: 10px;"></view>
		<view class="haveCardBox" v-for="item in cardList">

			<view class="module1">
				<view class="span1" @click="addOrEdit(item)">{{$t('mine.bank.edit')}}</view>
				<view class="span2" @click="deleteCard(item.id)">{{$t('mine.bank.delete')}}</view>
			</view>
			<view class="module2">
				<!--				<u-row class="title" customStyle="align-items: center;justify-content: flex-start;">-->
				<!--					<u-col span="3">-->
				<!--						<view>First Name:</view>-->
				<!--					</u-col>-->
				<!--					{{item.firstName}}-->
				<!--				</u-row>-->
				<u-row class="title" customStyle="align-items: center;justify-content: flex-start;">
					<u-col span="3" class="title2">
						<view>{{$t('mine.bank.userName')}}:</view>
					</u-col>
					{{item.userName}}
				</u-row>
				<!-- <u-row class="title" customStyle="align-items: center;justify-content: flex-start;">
					<u-col span="3" class="title2">
						<view>{{$t('mine.bank.bankName')}}:</view>
					</u-col>
					{{item.bankName}}
				</u-row> -->
				<u-row class="title" customStyle="align-items: center;justify-content: flex-start;">
					<u-col span="3" class="title2">
						<view>{{$t('mine.bank.bankAccount')}}:</view>
					</u-col>
					<view>{{item.bankNo}}</view>
				</u-row>

			</view>
		</view>

		<view class="flex justify-start add-btn" @click="addOrEdit('add')">
			<uni-icons type="plusempty" size="20"></uni-icons>
			<view class="btn-title">{{$t('mine.bank.addBankCard')}}</view>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" :cancelText="$t('common.cancel')" :confirmText="$t('common.submit')"
				:title="$t('common.prompt')" :content="$t('mine.bank.deleteProp')"
				@confirm="deleteConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getList,
		deleteBankCard
	} from "@/api/bankCard.js"


	export default {
		onLoad: function() {
			//this.getBankList();
		},
		onShow() {
			this.getBankList();
		},
		data() {
			return {
				cardList: [],
				deleteId: ''
			};
		},
		methods: {
			getBankList() {
				getList().then(rsp => {
					if (rsp.code == 200) {
						this.cardList = rsp.rows;
					}
				})
			},
			addOrEdit(item) {
				this.$tab.navigateTo('/pages/mine/card/save-card?item=' + JSON.stringify(item))
			},

			deleteCard(id) {
				this.deleteId = id;
				this.$refs.alertDialog.open()
			},
			deleteConfirm() {
				deleteBankCard({
					'id': this.deleteId
				}).then(rsp => {
					if (rsp.code == 200) {
						uni.showToast({
							title: this.$t('mine.bank.deleteSuccess'),
							icon: 'success'
						})
						this.getBankList();
					} else {
						uni.showToast({
							title: rsp.msg,
							icon: 'error'
						})
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;

	}

	.card-conent {
		.haveCardBox {
			margin: 0 12px;
			margin-bottom: 10px;
			border-bottom: 1px solid black;
			;

			.module1 {
				display: flex;
				justify-content: right;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: grey;

				.span1 {
					color: $uni-color-primary;
					padding-right: 10px;
					border-right: 1px solid grey;
				}

				.span2 {
					padding: 0 18px 0 10px;
				}
			}

			.module2 {
				background-image: url(/static/images/card/cardBg.3bc7f24b.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 100%;
				box-sizing: border-box;
				padding: 20px;

				.title {
					padding-bottom: 8px;
					font-size: 12px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #fff;
					align-items: center;
					justify-content: flex-start;

					.title2 {
						padding-left: 0px;
						padding-right: 0px;
						align-items: stretch;
						justify-content: flex-start;
						text-align: left;
						flex: 0 0 25%;
						margin-left: 0%;

					}
				}
			}
		}

		.add-btn {
			margin: 0 12px;
			padding: 20px;
			height: 55px;
			background-color: $uni-color-primary;
			color: $uni-color-box;
			align-items: center;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;

			.btn-title {
				margin-left: 8px;
			}
		}
	}
</style>